<template>
  <div>
    <!-- {{clslist}} -->
    <el-table @cell-dblclick="updata" :data="clslist" border style="width: 100%">
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column prop="name" label="类别名称">
        <template slot-scope="scope">
          <el-input
            @change="saveFn(scope)"
            v-focus
            v-if="scope.row.bool"
            v-model="scope.row.name"
            placeholder="请输入内容"
          ></el-input>
          <el-tag disable-transitions v-else>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-show="scope.$index==0" size="medium" type="success">保存</el-button>
          <el-button
            v-show="!scope.$index==0"
            @click="updata(scope.row)"
            size="medium"
            type="warning"
          >修改</el-button>
          <el-button
            v-show="!scope.$index==0"
            @click="removeFn(scope.row)"
            size="medium"
            type="danger"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getLists();
    console.log(this.clslist);
  },
  methods: {
    ...mapActions("classify", ["getLists", "getSaves", "removesFn"]),
    //新增
    saveFn(res) {
      console.log(res);
      this.getSaves(res.row);
      this.$message({
        message: `${res.row.id ? "修改成功" : "新增成功"}`,
        type: "success"
      });
    },
    //修改
    updata(row) {
      row.bool = true;
    },
    //删除
    removeFn(row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.removesFn(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  //自定义指令
  directives: {
    //自定义属性获取焦点
    focus: {
      inserted(el) {
        el.getElementsByTagName("input")[0].focus();
      }
    }
  },
  computed: {
    clslist() {
      let res = this.$store.state.classify.list.map(item => {
        return (item = { ...item, bool: false });
      });
      res.unshift({
        name: "",
        bool: true
      });
      return res;
    }
  }
};
</script>

<style>
</style>